<template>
    <l-page>
        <l-navbar title="评估申请" />
        <view>
            <u-image :src="$imgUrl + '600/200'" width="100%" height="150"></u-image>
        </view>
        <view class="!-mt-6 panel shadow relative">
            <u-steps :current="setp">
                <u-steps-item title="填写评估信息">
                </u-steps-item>
                <u-steps-item title="提交"></u-steps-item>
            </u-steps>
            <view v-if="setp == 0">
                <!-- 联系人 -->
                <l-tab :list="['联系人']" class="mt-3"></l-tab>
                <l-select label="评估目的" class="mt-3" :list="list" />
                <l-input label="姓名" class="mt-3" />
                <l-input label="联系电话" class="mt-3" />
                <!-- 物业信息 -->
                <l-tab :list="['物业信息']" class="mt-3"></l-tab>
                <l-select label="物业所在地" class="mt-3" :list="list" />
                <l-input label="详细地址" class="mt-3" />
                <l-input label="小区名称" class="mt-3" />
                <l-input label="建筑面积（m²）" class="mt-3" />
                <l-input label="楼层" class="mt-3" />
                <l-input label="总楼层" class="mt-3" />
                <view class="mt-3 flex items-center">
                    <view class="mr-3">电梯设备</view>
                    <u-radio-group>
                        <u-radio shape="circle" label="有"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="无"></u-radio>
                    </u-radio-group>
                </view>
                <l-input label="楼龄" class="mt-3" />
                <l-select label="房屋属性" class="mt-3" :list="list" />
                <l-select label="房屋用途" class="mt-3" :list="list" />
                <l-select label="房屋结构" class="mt-3" :list="list" />
                <l-select label="户型" class="mt-3" :list="list" />
                <l-select label="房屋性质" class="mt-3" :list="list" />
                <l-input label="成交总价（元）" class="mt-3" />
                <!-- 贷款人信息 -->
                <l-tab :list="['贷款人信息']" class="mt-3"></l-tab>
                <l-select label="贷款类型" class="mt-3" :list="list" />
                <l-select label="拟贷款银行" class="mt-3" :list="list" />
                <l-select label="支行" class="mt-3" :list="list" />
                <l-select label="评估公司" class="mt-3" :list="list" />
                <view class="mt-3 flex items-center">
                    <view class="mr-2">担保快放</view>
                    <u-radio-group>
                        <u-radio shape="circle" label="是"></u-radio>
                        &emsp;
                        <u-radio shape="circle" label="否"></u-radio>
                    </u-radio-group>
                </view>
                <l-input label="商业贷款额（元）" class="mt-3" />
                <l-input label="商业贷款额年限" class="mt-3" />
                <l-select label="还款方式" class="mt-3" :list="list"></l-select>
                <l-input label="公积金贷款额（元）" class="mt-3" />
                <l-input label="公积金贷款年限" class="mt-3" />
                <l-select label="还款方式" class="mt-3" />
                <view class="mt-3">
                    <view>还款方式</view>
                    <u-textarea></u-textarea>
                </view>
                <l-button class="mt-3" type="primary" @tap="setp = 1">下一步</l-button>
            </view>
            <view v-if="setp == 1">
                <view class="flex flex-col items-center">
                    <u-count-to :startVal="30" :endVal="500" fontSize="50" color="#f00"></u-count-to>
                    <view>需要支付（单位：元）</view>
                </view>
            </view>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let list = [
    {
        label: 'test1',
        value: 0
    },
    {
        label: 'test2',
        value: 1
    },
]
let test = ref(0), setp = ref(0)
</script>
<style scoped lang="scss"></style>